<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>30.炫酷的文字LOGO效果元素构建</title>
  <style>

  </style>
</head>
<body>
  <div>houdunren.com</div>
  <script>
    // 1. 将div内的文字转换成数组，再用span 标签包裹
    const div = document.querySelector('div');
    [...div.textContent].reduce(function(pre,cur,index){
      console.log(pre,cur,index);
      // pre初始值为0，索引为0时和pre的值相等，清空div
      pre==index && (div.innerHTML = '')
      // 为每个字符套上 span标签
      let span  = document.createElement('span');
      span.innerHTML = cur;
      div.appendChild(span);
      //鼠标移动的时候为每个span标签增加一个类
      span.addEventListener("mouseover",function() {
        this.classList.add("changeColor");
      });
    },0);
  </script>
</body>
</html>